<!-- 预览时,生成不同类型表单 -->
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">

  <div v-if="widget.options.show == true">

    <div v-if="parentContainer">
      <!-- 显示名称 -->
      <el-form-item
        v-if="widget.type != 'block' && widget.type != 'tabs'"
        :label="getLable(widget)"
        :style="widget.options.customStyle"
        :prop="widget.model"
        :rules="widget.rules"

        :class="{'is_req': widget.options.required,'display':'block',[widget.options.customClass]: widget.options.customClass?true: false}"
      >
        <generate-element-item
          v-model="dataModel"
          :strut-all="strutAll"
          :blanks="blanks"
          :is-table="false"
          :widget="widget"
          :models_temp="models_temp"
          :models.sync="dataModels"
          :remote="remote"
        >

          <template v-for="blank in blanks" v-slot:[blank.name]="scope">
            <slot :name="blank.name" :model="scope.model" />
          </template>
        </generate-element-item>
      </el-form-item>

      <div
        v-else-if="widget.type == 'block'"
        :label="getLable(widget)"

        :prop="widget.model"
        class="block-show"
      >
        <!--        区域块标题-->
        <span class="title">{{ widget.options.showTitle?widget.name:"" }}</span>
        <generate-element-item
          v-model="dataModel"
          :blanks="blanks"
          :is-table="false"
          :widget="widget"
          :models_temp="models_temp"
          :strut-all="strutAll"
          :path="path"
          :models.sync="dataModels"
          :remote="remote"
        >
          <template v-for="blank in blanks" v-slot:[blank.name]="scope">
            <slot :name="blank.name" :model="scope.model" />
          </template>
        </generate-element-item>
      </div>

      <div
        v-else-if="widget.type == 'card'"
        :label="getLable(widget)"
        :prop="widget.model"
        class="block-show"
      >
        <!--        卡片标题-->
        <span class="title">{{ widget.options.showTitle?widget.name:"" }}</span>
        <generate-element-item
          v-model="dataModel"
          :blanks="blanks"
          :is-table="false"
          :widget="widget"
          :models_temp="models_temp"
          :strut-all="strutAll"
          :path="path"
          :models.sync="dataModels"
          :remote="remote"
        >
          <template v-for="blank in blanks" v-slot:[blank.name]="scope">
            <slot :name="blank.name" :model="scope.model" />
          </template>
        </generate-element-item>
      </div>

      <div
        v-else-if="widget.type == 'tabs'"

        :label="getLable(widget)"

        :prop="widget.model"
        class="block-show"
      >
        <!--        tabs块标题-->
        <span class="title">{{ widget.options.showTitle?widget.name:"" }}</span>
        <generate-element-item
          v-model="dataModel"
          :blanks="blanks"
          :widget="widget"
          :models_temp="models_temp"
          :strut-all="strutAll"
          :path="path"
          :models.sync="dataModels"
          :remote="remote"
        >
          <template v-for="blank in blanks" v-slot:[blank.name]="scope">
            <slot :name="blank.name" :model="scope.model" />
          </template>
        </generate-element-item>
      </div>
      <div
        v-else-if="widget.type == 'collapse'"
        :label="getLable(widget)"

        :prop="widget.model"
        class="block-show"
      >
        <!--        折叠面板标题-->
        <span class="title">{{ widget.options.showTitle?widget.name:"" }}</span>
        <generate-element-item
          v-model="dataModel"
          :blanks="blanks"
          :widget="widget"
          :models_temp="models_temp"
          :strut-all="strutAll"
          :path="path"
          :models.sync="dataModels"
          :remote="remote"
        >
          <template v-for="blank in blanks" v-slot:[blank.name]="scope">
            <slot :name="blank.name" :model="scope.model" />
          </template>
        </generate-element-item>
      </div>

    </div>
    <div v-else>

      <el-col :span="widget.options.span">
        <!-- 显示名称 -->

        <el-form-item
          v-if="widget.type != 'block' && widget.type != 'tabs'"
          :label="getLable(widget)"
          :style="widget.options.customStyle"
          :prop="widget.model"
          :rules="widget.rules"

          :class="{'is_req': widget.options.required,'is_req': widget.options.required,'display':'block',[widget.options.customClass]: widget.options.customClass?true: false}"
        >
          <generate-element-item
            v-model="dataModel"
            :strut-all="strutAll"
            :blanks="blanks"
            :is-table="false"
            :widget="widget"
            :models_temp="models_temp"
            :models.sync="dataModels"
            :remote="remote"
          >

            <template v-for="blank in blanks" v-slot:[blank.name]="scope">
              <slot :name="blank.name" :model="scope.model" />
            </template>
          </generate-element-item>

        </el-form-item>

        <div
          v-else-if="widget.type == 'block'"
          :label="getLable(widget)"

          :prop="widget.model"
          class="block-show"
        >
          <!--        区域块标题-->
          <span class="title">{{ widget.options.showTitle?widget.name:"" }}</span>
          <generate-element-item
            v-model="dataModel"
            :blanks="blanks"
            :is-table="false"
            :widget="widget"
            :models_temp="models_temp"
            :strut-all="strutAll"
            :path="path"
            :models.sync="dataModels"
            :remote="remote"
          >
            <template v-for="blank in blanks" v-slot:[blank.name]="scope">
              <slot :name="blank.name" :model="scope.model" />
            </template>
          </generate-element-item>
        </div>

        <div
          v-else-if="widget.type == 'card'"
          :label="getLable(widget)"
          :prop="widget.model"
          class="block-show"
        >
          <!--        卡片标题-->
          <span class="title">{{ widget.options.showTitle?widget.name:"" }}</span>
          <generate-element-item
            v-model="dataModel"
            :blanks="blanks"
            :is-table="false"
            :widget="widget"
            :models_temp="models_temp"
            :strut-all="strutAll"
            :path="path"
            :models.sync="dataModels"
            :remote="remote"
          >
            <template v-for="blank in blanks" v-slot:[blank.name]="scope">
              <slot :name="blank.name" :model="scope.model" />
            </template>
          </generate-element-item>
        </div>

        <div
          v-else-if="widget.type == 'tabs'"

          :label="getLable(widget)"

          :prop="widget.model"
          class="block-show"
        >
          <!--        tabs块标题-->
          <span class="title">{{ widget.options.showTitle?widget.name:"" }}</span>
          <generate-element-item
            v-model="dataModel"
            :blanks="blanks"
            :widget="widget"
            :models_temp="models_temp"
            :strut-all="strutAll"
            :path="path"
            :models.sync="dataModels"
            :remote="remote"
          >
            <template v-for="blank in blanks" v-slot:[blank.name]="scope">
              <slot :name="blank.name" :model="scope.model" />
            </template>
          </generate-element-item>
        </div>
        <div
          v-else-if="widget.type == 'collapse'"
          :label="getLable(widget)"

          :prop="widget.model"
          class="block-show"
        >
          <!--        折叠面板标题-->
          <span class="title">{{ widget.options.showTitle?widget.name:"" }}</span>
          <generate-element-item
            v-model="dataModel"
            :blanks="blanks"
            :widget="widget"
            :models_temp="models_temp"
            :strut-all="strutAll"
            :path="path"
            :models.sync="dataModels"
            :remote="remote"
          >
            <template v-for="blank in blanks" v-slot:[blank.name]="scope">
              <slot :name="blank.name" :model="scope.model" />
            </template>
          </generate-element-item>
        </div>

      </el-col>
    </div>

  </div>

</template>

<script>
import GenerateElementItem from './GenerateElementItem'
import { findTableColumns } from './router/utils.js'
import { validatePhone, validateIdNo, validateEMail, validateURL, validatePwd, validateDate, validateReg } from './validate.js'
import { getLable } from './js/formUtils.js'

export default {
  components: {
    GenerateElementItem
  },
  props: ['widget', 'models', 'rules', 'remote', 'blanks', 'models_temp', 'strutAll', 'path', 'index', 'parentContainer'],
  data() {
    return {

      dataModel: this.models[this.widget.model] == null ? '' : this.models[this.widget.model],
      dataModels: this.models == null ? '' : this.models
    }
  },
  watch: {
    dataModel: {
      deep: true,
      immediate: true,
      handler(val) {
        try {
          this.models[this.widget.model] = val
          this.$emit('update:models', {
            ...this.models,
            [this.widget.model]: val
          })
        } catch (e) {
        }
      }
    },
    models: {
      deep: true,
      handler(val) {
        try {
          this.dataModel = val[this.widget.model]
          this.dataModels = val// 改子表单和区域数据会造成最外层表单数据的改变
        } catch (e) {
        }
      }
    },
    dataModels: {
      deep: true,
      handler(val) {
        try {
          this.$emit('update:models', val)
        } catch (e) {
        }
      }
    }

  },
  created() {

  },
  mounted() {
    if (this.widget.tableColumns) {
      var tableColumns = this.widget.tableColumns

      for (var i = 0; i < tableColumns.length; i++) {
        var widgetNode = tableColumns[i]
			  if (widgetNode.rules) {
				  for (var j = 0; j < widgetNode.rules.length; j++) {
					  widgetNode.rules[j].validator = this.validatePass
				  }
			  }
      }
    }
    if (this.widget.tabColumns) {
      // eslint-disable-next-line no-redeclare
      var tableColumns = this.widget.tabColumns

      // eslint-disable-next-line no-redeclare
      for (var i = 0; i < tableColumns.length; i++) {
        // eslint-disable-next-line no-redeclare
        var widgetNode = tableColumns[i]
			  if (widgetNode.rules) {
				  // eslint-disable-next-line no-redeclare
				  for (var j = 0; j < widgetNode.rules.length; j++) {
					  widgetNode.rules[j].validator = this.validatePass
				  }
			  }
      }
    }
    // VUE 嵌套的 手工赋值下 要不不生效
    if (this.widget.rules) {
      var rules = this.widget.rules
		  for (let i = 0; i < rules.length; i++) {
        rules[i].validator = this.validatePass
		  }
	  }
  },
  methods: {

	  getLable: function(element) {
		  return getLable(element)
	  },
    addBlockItem() {
    },
    getClass(data) {
      var isRed = data.options.showRed
      if (isRed) {
        return 'vvvv'
      }
    },

    validatePass(rule, info, callback) {
      var type = rule.customerType
      var length = rule.val
      if (type === 'nonull' && info.length === 0) {
			  callback(new Error(rule.msg))
      } else if (type === 'isnum' && !/^[0-9]*$/.test(info) && info.length > 0) {
			  callback(new Error(rule.msg))
      } else if (type === 'min' && info.length < length) {
			  callback(new Error(rule.msg))
      } else if (type === 'max' && info.length > length) {
			  callback(new Error(rule.msg))
      } else if (type === 'phone' && info.length > 0 && !validatePhone(info)) {
			  callback(new Error(rule.msg))
      } else if (type === 'idNumber' && info.length > 0 && !validateIdNo(info)) {
			  callback(new Error(rule.msg))
      } else if (type === 'email' && info.length > 0 && !validateEMail(info)) {
			  callback(new Error(rule.msg))
      } else if (type === 'url' && info.length > 0 && !validateURL(info)) {
			  callback(new Error(rule.msg))
      } else if (type === 'pwd' && info.length > 0 && !validatePwd(info)) {
			  callback(new Error(rule.msg))
      } else if (type === 'date' && info.length > 0 && !validateDate(info)) {
			  callback(new Error(rule.msg))
      }
      // regular
      else if (type === 'regular' && info.length > 0 && !validateReg(length, info)) {
			  callback(new Error(rule.msg))
      } else if (type === 'dateRule') {
        var currentVal = this.models[this.widget.model]
        var otherVal = this.models[this.widget.options.ckeckedDatevalidType]
        if (currentVal && otherVal) {
          var dateValidRule = this.widget.options.dateValidRule
          var otherName = ''
          var operateName = ''
          if (!otherVal) {
            callback()
          }
          if (dateValidRule) {
            var strutAll = this.strutAll
            var list = strutAll.list
            var otherNodes = []
            for (var i = 0; i < list.length; i++) {
              var node = list[i]
              if (node.model === this.widget.options.ckeckedDatevalidType) {
                otherName = node.name
              }
            }

            var dateValidRuleResult = false
            if (dateValidRule === '>=') {
              operateName = '大于等于'
              dateValidRuleResult = (currentVal - otherVal >= 0)
            } else if (dateValidRule === '<') {
              operateName = '小于'
              dateValidRuleResult = (currentVal - otherVal < 0)
            } else if (dateValidRule === '==') {
              operateName = '等于'
              dateValidRuleResult = (currentVal - otherVal === 0)
            } else if (dateValidRule === '<=') {
              operateName = '小于等于'
              dateValidRuleResult = (currentVal - otherVal <= 0)
            }
            if (!dateValidRuleResult) {
              callback(new Error('当前日期应该' + operateName + otherName + '的日期'))
            } else {
              callback()
            }
          }
        } else {
          var field = rule.field
          var pathDot = rule.field.split('.')
          if (pathDot) {
            var blockId = pathDot[0]
            var index = pathDot[1]
            var modelId = pathDot[2]
            var node = currentVal[index]
            var operateName = ''
            var subNodes = findTableColumns(this.strutAll.list, modelId)
            if (subNodes) {
              for (var i = 0; i < subNodes.length; i++) {
                if (subNodes[i].model === modelId) {
                  var subNode = subNodes[i]

                  var ckeckedDatevalidType = subNode.options.ckeckedDatevalidType
                  var dateValidRule = subNode.options.dateValidRule
                  var others = findTableColumns(this.strutAll.list, ckeckedDatevalidType)
                  for (var j = 0; j < others.length; j++) {
                    if (others[j].model === ckeckedDatevalidType) {
                      otherName = others[j].name
                    }
                  }

                  var otherVal = this.dataModel[index][ckeckedDatevalidType]
                  if (otherVal) {

                  }
                  var dateValidRuleResult = false
                  if (dateValidRule === '>=') {
                    operateName = '大于等于'
                    dateValidRuleResult = (info - otherVal >= 0)
                  } else if (dateValidRule === '<') {
                    operateName = '小于'
                    dateValidRuleResult = (info - otherVal < 0)
                  } else if (dateValidRule === '==') {
                    operateName = '等于'
                    dateValidRuleResult = (info - otherVal === 0)
                  } else if (dateValidRule === '<=') {
                    operateName = '小于等于'
                    dateValidRuleResult = (info - otherVal <= 0)
                  }
                  if (!dateValidRuleResult) {
                    callback(new Error('当前日期应该' + operateName + otherName + '的日期'))
                  } else {
                    callback()
                  }
                }
              }
            }
          }
        }
      } else if (rule.isregexp && !/^[^%'"?!^#%*/]*$/.test(info)) {
			  callback(new Error(rule.msg))
      } else if (rule.isnumeng_ && !/^[0-9a-zA-Z_]*$/.test(info.value)) {
			  callback(new Error(rule.msg))
      } else if (rule.maxlength && !info.value === '' && info.value.length > rule.maxlength) {
			  callback(new Error(rule.msg))
      } else {
        callback()
      }
    }
  }
}
</script>
<style>
 .block-h3{
	 padding-left:0px;
	 margin-bottom: 15px;
 }
 .block-show{
	 margin-left:5%;
	 margin-bottom: 10px;
	 margin-top: 10px ;
 }
</style>
